<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link href="index.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/p5.js/0.6.1/p5.min.js"></script>
    <script src="../js/p5.sound.min.js"></script>
    <title>Osc</title>
    <style>
        body {
            font-family: Roboto;
            background: #f7f7f7;
            padding: 0;
            margin: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <script>
        document.body.addEventListener('touchmove', function (e) {
            e.preventDefault();
        })


        var carrier; // this is the oscillator we will hear
        var modulator; // this oscillator will modulate the frequency of the carrier

        var analyzer; // we'll use this visualize the waveform

        // the carrier frequency pre-modulation
        var carrierBaseFreq = 220;

        // min/max ranges for modulator
        var modMaxFreq = 112;
        var modMinFreq = 0;
        var modMaxDepth = 150;
        var modMinDepth = -150;

        function setup() {
            var cnv = createCanvas(window.innerWidth, window.innerHeight);
            noFill();

            carrier = new p5.Oscillator('sine');
            carrier.amp(0); // set amplitude
            carrier.freq(carrierBaseFreq); // set frequency
            carrier.start(); // start oscillating

            // try changing the type to 'square', 'sine' or 'triangle'
            modulator = new p5.Oscillator('sawtooth');
            modulator.start();

            // add the modulator's output to modulate the carrier's frequency
            modulator.disconnect();
            carrier.freq(modulator);

            // create an FFT to analyze the audio
            analyzer = new p5.FFT();

            // fade carrier in/out on mouseover / touch start
            toggleAudio(cnv);
        }

        function draw() {
            background(30);

            // map mouseY to modulator freq between a maximum and minimum frequency
            var modFreq = map(mouseY, height, 0, modMinFreq, modMaxFreq);
            modulator.freq(modFreq);

            // change the amplitude of the modulator
            // negative amp reverses the sawtooth waveform, and sounds percussive
            //
            var modDepth = map(mouseX, 0, width, modMinDepth, modMaxDepth);
            modulator.amp(modDepth);

            // analyze the waveform
            waveform = analyzer.waveform();

            // draw the shape of the waveform
            stroke(255);
            strokeWeight(10);
            beginShape();
            for (var i = 0; i < waveform.length; i++) {
                var x = map(i, 0, waveform.length, 0, width);
                var y = map(waveform[i], -1, 1, -height / 2, height / 2);
                vertex(x, y + height / 2);
            }
            endShape();

            strokeWeight(1);
            // add a note about what's happening
            // text('Modulator Frequency: ' + modFreq.toFixed(3) + ' Hz', 20, 20);
            // text('Modulator Amplitude (Modulation Depth): ' + modDepth.toFixed(3), 20, 40);
            // text('Carrier Frequency (pre-modulation): ' + carrierBaseFreq + ' Hz', width / 2, 20);

        }

        // helper function to toggle sound
        function toggleAudio(cnv) {
            cnv.mouseOver(function () {
                carrier.amp(1.0, 0.01);
            });
            cnv.touchStarted(function () {
                carrier.amp(1.0, 0.01);
            });
            cnv.mouseOut(function () {
                carrier.amp(0.0, 1.0);
            });
        }



    </script>
</body>


</html>